<template>
  <div class="docList">
    <div class="doc-item" v-for="(item,index) in options" :key="index">
      <span @click="toPage(item)">{{item.name}}</span>
      <div>
        <el-button type="text" style="color: #3a8f7b" icon="el-icon-download" @click="download(item)">下载</el-button>
        <el-button type="text" style="color: #3a8f7b" icon="el-icon-tickets" @click="toPage(item)">详情</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Prop} from 'vue-property-decorator';
import {downloadById} from "@/api/information";
import {Loading} from "element-ui";

@Component
export default class DocList extends Vue {
  @Prop({default: ''}) private options!: string;
  toPage({id}){
    this.$router.push({path: `/docs/detail?id=${id}`})
  }

  async download({id}){
    let loadingInstance = Loading.service({fullscreen: true, background: 'rgba(0, 0, 0, 0.7)'});
    let res = await downloadById(id)
    loadingInstance.close()
    if (res && res.data) {
      (this as any).$download(res.data.fileName);
    }
  }
}
</script>
<style lang="scss" scoped>
.docList{
  .doc-item{
    padding: 3px 0;
    border-bottom: 1px solid #e2e2e2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
  }
}
</style>
